<template>
  <!--  菜单模块页面-->
  <div class="page">
    <div
      style="font-size: 28px;display: flex;align-items: center;justify-content: left;width: 100vw;color: #7f7f7f;   cursor: pointer;">
      <p style="min-width: 5%;" :key="item.id" @click="ssBtn(item)" v-for="item in tableText"
         :class="menuBox==item.code ? 'menuBox' : ' '">{{item.name}}
        <i class="iconfont iconjinruyou" :class="menuBox==item.code ? 'menuBox' : ' '"
           style="color: #7f7f7f;font-size: 28px;font-weight: 600"></i>
      </p>
    </div>
    <div class="page_main">
      <el-button icon="el-icon-plus" @click.stop="websiteAdd()" class="common_btn-small">添加菜单</el-button>
      <el-button icon="el-icon-sort" @click.stop="handleSortMonitorPoint()" class="common_btn-small">
        菜单排序
      </el-button>
      <transition name="slide-left">
        <div v-show="cardShow">
          <!-- table -->
          <div class="cardBox">
            <el-divider><span style="font-size: 25px; color:#1990FE">选择{{dividerName}}</span></el-divider>
            <el-card shadow="hover" :class="parentId == item.id ? 'select_card' : 'hover_card'"
                     @click.native="changeDamageType(item,index)" v-for="(item,index) in dataList" :key="item.id">
              <div class="divTitle">
                <span class="zh_name_view">{{ item.name }}</span>
              </div>
              <p style="font-size: 12px;margin-top: 30px">创建事件： {{item.createTime | formatTimer }}</p>
              <!--              v-if="damageType == item.id " -->
              <div style="margin-bottom: 20px">
                <button type="text"
                        class="btn_add"
                        @click.stop="handleEdit(item,)" style="margin-right: 10px">
                  修改
                </button>
                <el-popconfirm :title="item.flag===0?'确定启用该菜单吗':'确定停用该菜单吗'"
                               @confirm="handleValidate(item.id,item.flag===0?1:0)">
                  <button :class="item.flag===0?'btn_edit':'btn_delete'" slot="reference" @click.stop>{{item.flag===0?'启用':'停用'}}</button>
                </el-popconfirm>

              </div>
            </el-card>

          </div>
        </div>
      </transition>

    </div>
    <!--    新增编辑菜单-->
    <el-drawer :title=dialogTitle :visible.sync="isShowDialog2" :close-on-click-modal="false" size="50%" direction="ltr"
               style="text-align: center">
      <div class="demo-drawer__content">
        <el-form label-position="right" ref="form3" :rules="rules" :model="form3" label-width="120px"
        >
          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item label="上级菜单" v-if="parentId">
                <el-input v-model.trim="parentName"
                          disabled></el-input>
              </el-form-item>
              <el-form-item label="标题" prop="title">
                <el-input v-model.trim="form3.title" placeholder="输入标题"></el-input>
              </el-form-item>
              <el-form-item label="链接" prop="url">
                <el-input v-model.trim="form3.url" placeholder="输入链接"></el-input>
              </el-form-item>
              <el-form-item v-if="parentId==''" label="菜单类型" prop="type">
                <el-select v-model="form3.type" placeholder="选择类型">
                  <el-option
                    v-for="item in EnumWebTypeList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="菜单名称" prop="name">
                <el-input v-model.trim="form3.name" placeholder="输入菜单名称"></el-input>
              </el-form-item>
              <el-form-item label="副标题" prop="subtitle">
                <el-input v-model.trim="form3.subtitle" placeholder="输入副标题"></el-input>
              </el-form-item>
              <el-form-item v-if="parentId" label="菜单类型" prop="type">
                <el-select v-model="form3.type" placeholder="选择类型">
                  <el-option
                    v-for="item in EnumWebTypeList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">

              <el-form-item label="详情" prop="detail">
                <el-input type="textarea" v-model.trim="form3.detail" placeholder="输入详情"
                          style="min-height: 100px"></el-input>
              </el-form-item>

            </el-col>
          </el-row>
          <el-form-item label="上传照片" prop="picture" style="width: 100%!important;">
            <upload-img v-model="form3.picture" :limit="2" :size-limit="2"
                        ref="uploadPic"></upload-img>
          </el-form-item>
        </el-form>
        <div class="caseBox">
          <!--富文本编辑器-->
          <quill-editor class='editor ql-editor'
                        ref="myQuillEditor"
                        v-model="form3.richText"
                        :options="editorOption"
                        @blur="onEditorBlur($event)"
                        @focus="onEditorFocus($event)"
                        @ready="onEditorReady($event)"/>

        </div>
      </div>
      <div class="demo-drawer__footer" style="text-align: right;">
        <el-button class="common_btn-white" @click="isShowDialog2 = false">取消</el-button>
        <el-button type="primary" class=" common_btn-defalut1" @click="validateForm"
                   style="background:#1990FE">提 交
        </el-button>

      </div>
    </el-drawer>
    <!--    菜单排序-->
    <el-dialog title="菜单排序" :visible.sync="isShowDialog" :close-on-click-modal="false" width="220px">
      <div style="text-align: center;color: #ff4d51;margin-bottom: 10px;font-size: 15px">从上至下进行排序，拖拽改变顺序，提交后生效！</div>
      <el-tree
        :data="monitorSortList"
        node-key="id"
        default-expand-all
        highlight-current
        :allow-drop="allowDrop"
        draggable>
        <span class="custom-tree-node" slot-scope="{ node }">
            <span>
                <i class="el-icon-s-flag" style="margin-right: 10px;color: #1990FE"></i>{{ node.label }}
            </span>
        </span>
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-white" @click="isShowDialog = false">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="sortSubmit">确定</el-button>
      </span>
    </el-dialog>
    <upload-rich-img v-show="false" :callback="'richImg'" @richImg="richImg" class="avatar-upload_img"
                     v-model="form3.richPic" ref="uploadPics"></upload-rich-img>
  </div>

</template>
<script>
  import constUrl from '@/services/env'
  import UploadRichImg from '@/components/upload-richImg'
  import {
    getWebsiteList,
    getWebsiteAdd,
    getWebsiteUpdate,
    getWebsiteValidate,
    websitePointSort
  } from '@/services/model/website'
  import UploadImg from '@/components/upload-img'
  import {getDictData} from '@/services/model/common'
  import Format from '@/utils/format'
  import {quillEditor, Quill} from 'vue-quill-editor'

  const titleConfig = [
    {Choice: '.ql-insertMetric', title: '跳转配置'},
    {Choice: '.ql-bold', title: '加粗'},
    {Choice: '.ql-italic', title: '斜体'},
    {Choice: '.ql-underline', title: '下划线'},
    {Choice: '.ql-header', title: '段落格式'},
    {Choice: '.ql-strike', title: '删除线'},
    {Choice: '.ql-blockquote', title: '块引用'},
    {Choice: '.ql-code', title: '插入代码'},
    {Choice: '.ql-code-block', title: '插入代码段'},
    {Choice: '.ql-font', title: '字体'},
    {Choice: '.ql-size', title: '字体大小'},
    {Choice: '.ql-list[value="ordered"]', title: '编号列表'},
    {Choice: '.ql-list[value="bullet"]', title: '项目列表'},
    {Choice: '.ql-direction', title: '文本方向'},
    {Choice: '.ql-header[value="1"]', title: 'h1'},
    {Choice: '.ql-header[value="2"]', title: 'h2'},
    {Choice: '.ql-align', title: '对齐方式'},
    {Choice: '.ql-color', title: '字体颜色'},
    {Choice: '.ql-background', title: '背景颜色'},
    {Choice: '.ql-image', title: '图像'},
    {Choice: '.ql-video', title: '视频'},
    {Choice: '.ql-link', title: '添加链接'},
    {Choice: '.ql-formula', title: '插入公式'},
    {Choice: '.ql-clean', title: '清除字体格式'},
    {Choice: '.ql-script[value="sub"]', title: '下标'},
    {Choice: '.ql-script[value="super"]', title: '上标'},
    {Choice: '.ql-indent[value="-1"]', title: '向左缩进'},
    {Choice: '.ql-indent[value="+1"]', title: '向右缩进'},
    {Choice: '.ql-header .ql-picker-label', title: '标题大小'},
    {Choice: '.ql-header .ql-picker-item[data-value="1"]', title: '标题一'},
    {Choice: '.ql-header .ql-picker-item[data-value="2"]', title: '标题二'},
    {Choice: '.ql-header .ql-picker-item[data-value="3"]', title: '标题三'},
    {Choice: '.ql-header .ql-picker-item[data-value="4"]', title: '标题四'},
    {Choice: '.ql-header .ql-picker-item[data-value="5"]', title: '标题五'},
    {Choice: '.ql-header .ql-picker-item[data-value="6"]', title: '标题六'},
    {Choice: '.ql-header .ql-picker-item:last-child', title: '标准'},
    {Choice: '.ql-size .ql-picker-item[data-value="small"]', title: '小号'},
    {Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '大号'},
    {Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '超大号'},
    {Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '标准'},
    {Choice: '.ql-align .ql-picker-item:first-child', title: '居左对齐'},
    {Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '居中对齐'},
    {Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '居右对齐'},
    {Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '两端对齐'}
  ]
  // / toolbar标题
  const toolbarOptions = [
    ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
    ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
    [{header: 1}, {header: 2}], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
    [{list: "ordered"}, {list: "bullet"}], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
    [{script: "sub"}, {script: "super"}], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
    [{indent: "-1"}, {indent: "+1"}], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
    [{direction: "rtl"}], // 文本方向-----[{'direction': 'rtl'}]
    [{size: ['10px', '12px', false, '16px', '18px', '20px', '30px', '32px']}], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
    [{header: [1, 2, 3, 4, 5, 6, false]}], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
    [{color: []}, {background: []}], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
    [{font: [false, 'SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'sans-serif']}], // 字体种类-----[{ font: [] }]
    [{align: []}], // 对齐方式-----[{ align: [] }]
    ["clean"], // 清除文本格式-----['clean']
    ["image", "video"] // 链接、图片、视频-----['link', 'image', 'video']
  ];
  //自定义字体类型
  let Size = Quill.import('attributors/style/size')
  Size.whitelist = ['10px', '12px', '16px', '18px', '20px', '30px', '32px']
  Quill.register(Size, true)
  // 自定义字体类型
  var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'sans-serif']
  var Font = Quill.import('formats/font')
  Font.whitelist = fonts
  Quill.register(Font, true)
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import ImageResize from "quill-image-resize-module"; // 引用
  import {ImageDrop} from "quill-image-drop-module";

  Quill.register("modules/imageDrop", ImageDrop);
  Quill.register("modules/imageResize", ImageResize); // 注册
  // form表单校验规则
  const RULES = {
    name: {required: true, message: '请输入菜单名称'},
    type: {required: true, message: '请选择菜单类型'},
    level: {required: true, message: '请输入菜单等级'},
  };
  export default {
    components: {
      UploadImg,
      quillEditor,
      UploadRichImg
    },
    data() {
      return {
        constUrl,
        type: 1,
        //是否启用
        falg: 0,
        cardShow: false,
        parentName: '',
        monitorSortList: [],
        //菜单类型
        parentId: '',
        EnumWebTypeList: [],
        dataList: [],
        //上传图片
        dialogVisible: false,
        disabled: false,
        // 富文本编辑器
        content: null,
        dividerName: '第一级菜单',
        editorOption: {
          theme: "snow",
          placeholder: "请输入正文",
          modules: {
            imageDrop: true,
            imageResize: {
              displayStyles: {
                backgroundColor: "black",
                border: "none",
                color: "white"
              },
              modules: ["Resize", "DisplaySize", "Toolbar"]
            },
            //  富文本编辑器配置
            toolbar: {
              container: toolbarOptions,
              handlers: {
                'image': function (value) {
                  if (value) {
                    document.querySelector('.avatar-upload_img input').click()
                  } else {

                    this.quill.format('image', false)
                  }
                }
              }
            }
          }
        },
        isShowDialog: false,
        isShowDialog2: false,
        tableText: [{
          name: '第一级菜单',
          code: 1,
          parentId: ''
        },],
        menuBox: 1,
        form3: {richText: ''},
        rules: RULES,
        // 接口获取 打开方式
        EnumSysFlagList: [],
      }
    },
    filters: {
      // 时间格式化
      formatTimer(timer) {
        return Format(new Date(timer))
      }
    },
    computed: {
      // 弹窗的title
      dialogTitle() {
        return this.form3.id ? '编辑菜单' : '新增菜单'
      },
      // 树形菜单
      tableList() {
        let menu = this.$store.state.webList
        // 设置层级
        const _setLevel = (list, index = 1) => list.map(x => {
          x._level = index
          x.subMenu && _setLevel(x.subMenu, index + 1)
          return x
        })
        return _setLevel(menu)

      },
    },
    methods: {
      //失去焦点事件
      onEditorBlur(quill) {
      }
      ,
      //获得焦点事件
      onEditorFocus(quill) {
      }
      ,
      // 准备富文本编辑器
      onEditorReady(quill) {
      },
      richImg(val) {
        let quill = this.$refs.myQuillEditor.quill
        // 获取光标所在位置
        let length = quill.getSelection().index
        // 插入图片 dt.url为服务器返回的图片地址
        quill.insertEmbed(length, 'image', this.constUrl + val)
        // 调整光标到最后
        quill.setSelection(length + 1)
      },
      initTitle() {
        // console.log(document.getElementsByClassName('ql-editor')[0])

        // document.getElementsByClassName('ql-editor')[0].dataset.placeholder = ''
        for (let item of titleConfig) {
          let tip = document.querySelector('.quill-editor ' + item.Choice)
          if (!tip) continue
          tip.setAttribute('title', item.title)
        }
      },
      // 上传成功后处理图片
      setFormImg(path) {
        let item = {
          url: path
        }
        this.form3.picture.push(item)
      },
      //打开排序弹窗
      handleSortMonitorPoint() {
        this.monitorSortList = this.dataList.map(x => {
          return {id: x.id, weight: x.weight, label: x.name}
        })
        this.isShowDialog = true
      },
      //拖拽时判定目标节点能否被放置。type 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后
      allowDrop(draggingNode, dropNode, type) {
        //限制拖入节点内
        return type !== 'inner'
      },
      //排序确定事件
      async sortSubmit() {
        let name = []
        let i = this.monitorSortList.length
        //更新排序值
        this.monitorSortList.map(x => {
          x.weight = i
          name.push(x)
          i--
        })
        let res = await websitePointSort(name)
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '排序调整成功！'
          })
          this.isShowDialog = false
          this.queryList(this.parentId)

        }
      },
      // 通用获取枚举方法
      async queryDicts() {
        const {data} = await getDictData({enumName: 'EnumWebType'})
        this.EnumWebTypeList = data || []
      },

      // 面包屑切换
      ssBtn(item) {
        this.parentId = item.parentId
        this.menuBox = item.code
        this.parentName = item.name

        if (item.code == 1) {
          this.dividerName = '第一级菜单'
        } else if (item.code == 2) {
          this.dividerName = '第二级菜单'
        } else if (item.code == 3) {
          this.dividerName = '第三级菜单'
        } else if (item.code == 4) {
          this.dividerName = '第四级菜单'
        }
        this.tableText = this.tableText.filter(x => x.code <= item.code)
        this.cardShow = false

        this.queryList(item.parentId)
      },
      // 新增菜单按钮
      websiteAdd() {
        this.form3 = {type: 1}
        if (this.parentId != '') {
          this.form3.parentId = this.parentId
          this.form3.level = this.menuBox
        } else {
          this.form3.level = 1
        }


        this.isShowDialog2 = true
        this.$nextTick(() => {
          this.$refs.form3.clearValidate()
          this.$refs.uploadPic.clears()

        })
      },
      // 菜单选中
      changeDamageType(item) {
        if (item.type == 1) {
          this.type = 1
        } else if (item.type == 2) {
          this.type = 2
        }
        this.menuBox = item.level + 1
        if (this.menuBox == 2) {
          this.dividerName = '第二级菜单'
        } else if (this.menuBox == 3) {
          this.dividerName = '第三级菜单'
        } else if (this.menuBox == 4) {
          this.dividerName = '第四级菜单'
        }

        this.parentId = item.id
        this.parentName = item.name
        this.tableText.push({
          name: item.name,
          code: item.level + 1,
          parentId: item.id
        },)
        this.cardShow = false
        this.queryList(item.id)
      },
      // 通用获取枚举方法
      async queryDictData() {
        const {data} = await getDictData({enumName: 'EnumMenuTabFlag'})
        this.EnumSysFlagList = data || []
      },
      //停用
      async handleValidate(id, flag) {
        await getWebsiteValidate({id: id, flag: flag})
        this.$notify({
          title: '提示',
          message: '停用成功',
          type: 'success'
        })
        this.cardShow = false
        this.queryList()

      },
      // 修改 按钮
      handleEdit(item) {
        this.form3 = JSON.parse(JSON.stringify(item))
        this.isShowDialog2 = true
        // this.form3.picture=constUrl+this.form3.picture
        this.$nextTick(() => {
          this.$refs.form3.clearValidate()
        })
      },
      // 表单提交
      validateForm() {
        this.$refs.form3.validate((valid) => {
          valid && this.submitData()
        })
      },
      // 新增编辑提交数据
      async submitData() {
        // 根据ID判断使用新增还是编辑
        const AJAX_ACTION = this.form3.id ? getWebsiteUpdate : getWebsiteAdd
        await AJAX_ACTION(this.form3)
        this.$notify({
          type: 'success',
          title: '提示',
          message: this.form3.id ? '编辑成功' : '添加成功'
        })
        this.isShowDialog2 = false
        if (this.form3.parentId !== '') {
          this.cardShow = false
          this.queryList(this.form3.parentId)
        } else {
          this.cardShow = false
          this.queryList()
        }

      },
      // 数据查询
      async queryList(menuId) {
        const {data} = await getWebsiteList({page: 1, pageSize: 15, parentId: menuId})
        this.dataList = data.records
        this.cardShow = true
        this.$store.commit('setState', {name: 'webList', value: data.records || []})
      }
    },
    mounted() {
      this.cardShow = false
      this.queryDicts()
      this.queryList()
      this.initTitle()
    },
  }
</script>
<style lang="less" scoped>
  .page {
    height: 100%;
    padding: 24px;
    overflow-x: hidden;
    overflow-y: auto;

    .menu_icon-wrap {
      vertical-align: middle;
      display: inline-flex;
      width: 40px;
      height: 40px;
      border: 1px solid #DCDFE6;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      border-right: none;

      i {
        font-size: 22px;
      }
    }

    .menu_icon-select {
      width: calc(100% - 40px);

      /deep/ input {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        vertical-align: middle;
      }
    }

    .page_top {
      font-weight: 600;
      font-size: 20px;
      color: #23252C;
      background-color: #ffffff;
      height: 50px;
      padding: 0 20px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      margin-bottom: 16px;
    }
  }

  .page_header {
    padding: 10px 40px;
    background-color: #EEF4FF;
    color: #6680C1;

    & > em {
      padding-left: 20px;
    }

    .page_header-wrap {
      width: 70vw;
      display: flex;

      & > div {
        padding-left: 20px;
      }
    }
  }

  /deep/ .menu_tree {
    padding: 0 40px 40px;
    border-radius: 8px;

    .el-tree-node__content {
      height: 40px;
      border-bottom: 1px solid #3cc891;
    }

    .menu_node {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .menu_node-label {
        // width: 300px;
        // flex-shrink: 0;
      }

      .menu_node-content {
        display: flex;
        width: 70vw;
      }
    }
  }
</style>
<style lang="less" scoped>
  /deep/ .demo-drawer__footer {
    width: 80%;

  }

  .cardBox {
    width: 100%;
    /*height: 100vh;*/
    display: flex;
    align-items: center;
    justify-content: left;
    flex-wrap: wrap;
  }

  .el-card {
    height: 154px;
    overflow: auto;
    padding-top: 20px;
    width: 18%;
    display: flex;
    align-items: center;
    justify-content: left;
    margin: 1%;
    font-size: 120%;
    box-shadow: 0px 0px 8px #757575;
    background: #ffffff;
    color: #1990FE;
    box-shadow: none;
    border: 1px solid #1990FE !important;

    .el-divider {
      .el-divider__text {
        color: white;
      }
    }
  }

  .select_card {
    background: #29597f !important;
    font-size: 200%;
    font-weight: 600;
    transition: height 0.8s;
    height: 180px;
    color: white !important;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 2px 2px 2px #6d6d6d !important;
    overflow: hidden;

    .divTitle {
      transition: transform 0.8s;
      transform: translateY(-10px);
    }
  }

  .select_card2 {
    width: 30% !important;
    background: #29597f !important;
    font-size: 200%;
    font-weight: 600;
    transition: height 0.8s;
    height: 180px;
    color: white !important;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 2px 2px 2px #6d6d6d !important;
    overflow: hidden;

    .divTitle {
      transition: transform 0.8s;
      transform: translateY(-10px);
    }
  }

  .hover_card:hover {
    transition: 0.5s font-size;
    font-size: 180%;
    color: white !important;
    font-weight: 600;
    .btn_add{
      color: white;
    }
  }

  .el-card:hover {
    background: #29597f !important;

    .pBox {
      color: white !important;
    }
  }

  .zh_name_view {
    display: inline-block;
    margin-left: 15px;
  }

  .menuBox {
    font-weight: 600;
    color: #1990FE !important;
    cursor: pointer;
  }
</style>
<!--2. 自定义两组样式，来控制transition 内部的元素实现动画-->
<style>
  .slide-left-enter-active {
    transition: all 0.4s ease;
  }

  .slide-left-leave-active {
    transition: all 0s ease;
  }

  .slide-left-enter
    /* .slide-fade-leave-active for below version 2.1.8 */
  {
    transform: translateY(100%);
    /*transform: rotate(360deg);*/
    opacity: 1;
  }

  .slide-left-leave-to {
    transform: translateY(-100%);
    /*transform: rotate(-360deg);*/
    opacity: 1;
  }
</style>

<style scoped lang="less">

  // 全局修改滾動條樣式

  ::-webkit-scrollbar {
    width: 3px !important;
  }

  .demo-drawer__content::-webkit-scrollbar {
    width: 0px !important;
  }

  //滚动条的滑块
  ::-webkit-scrollbar-thumb {
    /*background-color: transparent!important;*/
    border-radius: 2px;
    height: 2px !important;
  }
  .caseBox {
    width: 80%;
    text-align: center;
    margin-top: 2vh;
    margin-left: 10%;
    height: 42vh;
    overflow: hidden;
    .ql-editor{
      height: 42vh;
    }
  }
  .detailsBox {
    width: 80%;
    background: linear-gradient(to left, #43d5fd, #0385ff);
    margin: auto;
    border: 1px solid transparent;
    .el-page-header {
      margin: 3vh 0;
      font-size: 120%;
      /deep/ .el-page-header__content {
        font-size: 20px
      }
      /deep/ .el-icon-back {
        font-size: 180% !important;
        color: white;

      }

      /deep/ .el-page-header__title {
        font-size: 180% !important;
        color: white;

      }

    }
  }

  .detailsContent {
    width: 100%;
    margin: auto;

    img {
      width: 100%;
      margin: auto;
      display: inline-block;
      height: 100%;

    }

  }

  .detailsBox .el-page-header[data-v-33c4fb8e] /deep/ .el-page-header__content {
    font-size: 180%;
    color: white;
  }

  /*修改富文本编辑器样式*/
  /deep/ .ql-toolbar.ql-snow + .ql-container.ql-snow {
    height: 4%;
    overflow-y: hidden;
  }

  /*修改表单样式*/
  .demo-drawer__content {
    height: 85vh;
    overflow-y: auto;
    /deep/ .el-form {
      width: 80%;
      margin: auto;
      display: flex;
      height: 30vh;
      overflow-y: auto;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 50px;
      text-align: left
    }

    /deep/ .el-form::-webkit-scrollbar {
      width: 0px;
      height: 0px;

    }

    /deep/ .el-textarea, /deep/ .el-textarea__inner {
      height: 30vh;
    }
  }
</style>
